<template>
  <div class="login-box">
    <div class="login-box-content">
      <h3>系统登录</h3>
       <slide-verify
          v-show="showverfiy"
          style="position: absolute; z-index: 6688"
          :l="42"
          :r="10"
          :w="300"
          :h="76"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          slider-text="向右滑动进行验证"
        ></slide-verify>
      <el-input
        v-model="acc"
        placeholder="请输入你的账号"
        style="margin-bottom: 10px"
        prefix-icon="el-icon-user-solid"
      ></el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
        style="margin-bottom: 10px"
        prefix-icon="el-icon-lock"
      ></el-input>

      <p
        v-show="show"
        style="font-size: 20px; color: rgb(235, 11, 78); text-align: center"
      >
        你的账号和密码错误
      </p>
      <el-button @click="funClick" type="primary" style="margin-top: 10px"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
//调用登录接口
import { login } from "../apis/user";
export default {
  data() {
    return {
      acc: "",
      password: "",
      show: false,
      showverfiy:false
    };
  },
  methods: {
    funClick() {
      this.showverfiy = true;
      // //如果为真 就return
      // if(this.islogin){
      //   this.$message({
      //     message:'您的操作频繁'
      //   })
      //   return
      // }
      // //设置节流
      // this.islogin=true;
      // setTimeout(()=>{
      //   this.islogin=false
      // },3000)

      
    },
    //
    onSuccess(){
      login({ account: this.acc, password: this.password }).then((res) => {
        // console.log(res);

        if (res.data.code == 1) {
          this.show = true;
          //  this.showverfiy = false;
        } else {
          localStorage.id =res.data.id
          localStorage.role =  res.data.role;
          localStorage.token = res.data.token;
          localStorage.acc = this.acc
          this.$message({
            message: "恭喜你，" + this.acc + "登录成功",
            type: "success",
          });
          this.$router.push("./home/main");
        }
      });
    },
     //验证失败
    onFail() {
      console.log("fail");
     
      
    },
    //验证码刷新
    onRefresh() {
      console.log("refresh");
    },
  },
};
</script>
<style lang='less' scoped>
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  .login-box-content {
    width: 300px;
    // border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-self: center;
    h3 {
      color: #fff;
      text-align: center;
      font-weight: normal;
      margin-bottom: 20px;
    }
  }
}
</style>